<script setup lang="tsx">
import { type VbenFormProps } from '@vben/common-ui';
import { Page } from '@vben/common-ui';

import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table';
import { getOrderList } from '#/api/core/product';

const formOptions: VbenFormProps = {
  // 默认展开
  collapsed: false,

  schema: [
    {
      component: 'Input',
      fieldName: 'payNo',
      label: '支付宝订单号',
    },
    {
      component: 'Input',
      fieldName: 'buyerId',
      label: '买家Id',
    },
    {
      component: 'Input',
      fieldName: 'shopId',
      label: '商家Id',
    },
    {
      component: 'Input',
      fieldName: 'agentId',
      label: '代理Id',
    },
  ],
  // 是否可展开
  showCollapseButton: false,
  submitOnChange: true,
  submitOnEnter: false,
  wrapperClass: 'grid-cols-1 md:grid-cols-4',
};

const enums = {
  platform: [
    {
      label: '快手',
      value: 0,
    },
    {
      label: '抖音',
      value: 1,
    },
  ],
};

const gridOptions: VxeGridProps = {
  checkboxConfig: {
    highlight: true,
    labelField: 'name',
  },
  columns: [
    { align: 'left', type: 'checkbox', width: 100 },

    { title: '序号', type: 'seq', width: 50 },
    {
      cellRender: { name: 'CellImage' },
      field: 'img',
      title: '图片',
      width: 120,
    },
    { field: 'title', title: '商品名称' },
    { field: 'productId', sortable: true, title: 'goods_id' },
    {
      cellRender: { name: 'CellTag', options: enums.platform },
      field: 'shopType',
      sortable: true,
      title: '平台',
    },
    { field: 'price', sortable: true, title: '补贴金额' },
    { field: 'createdTime', sortable: true, title: '时间' },
  ],
  height: 'auto',
  keepSource: true,
  pagerConfig: {},
  proxyConfig: {
    response: {
      result: 'list',
      total: 'total',
      list: 'list',
    },
    ajax: {
      query: async ({ page }) => {
        const res = await getOrderList({
          currentPage: page.currentPage,
          pageSize: page.pageSize,
          filter: {},
        });
        return res.data;
      },
    },
  },
  showOverflow: false,
};

const [Grid] = useVbenVxeGrid({ formOptions, gridOptions });
</script>
<template>
  <Page auto-content-height>
    <Grid />
  </Page>
</template>

<style lang="scss" scoped>
.page {
  background: white;
  padding: 20px;
}
</style>
<style>
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>
